<script setup lang="ts">
import {
  ElDialog,
  ElButton,
  ElDivider,
  ElInput,
  ElRow,
  ElCol,
  ElMessage,
} from "element-plus";
import { ref, defineExpose } from "vue";

const dialogVisible = ref(false);
const airportInfo = ref({
  address: "--",
  username: "--",
  password: "--",
  organizationCode: "--",
  deviceBindingCode: "--",
});

const openDialog = (info?: any) => {
  if (info) {
    airportInfo.value = {
      address: info.address || "--",
      username: info.username || "--",
      password: info.password || "--",
      organizationCode: info.organizationCode || "--",
      deviceBindingCode: info.deviceBindingCode || "--",
    };
  } else {
    airportInfo.value = {
      address: "--",
      username: "--",
      password: "--",
      organizationCode: "--",
      deviceBindingCode: "--",
    };
  }
  dialogVisible.value = true;
};

const closeDialog = () => {
  dialogVisible.value = false;
};

const copyInfo = () => {
  const address =
    airportInfo.value.address === "--" ? "" : airportInfo.value.address;
  const username =
    airportInfo.value.username === "--" ? "" : airportInfo.value.username;
  const password =
    airportInfo.value.password === "--" ? "" : airportInfo.value.password;
  const organizationCode =
    airportInfo.value.organizationCode === "--"
      ? ""
      : airportInfo.value.organizationCode;
  const deviceBindingCode =
    airportInfo.value.deviceBindingCode === "--"
      ? ""
      : airportInfo.value.deviceBindingCode;

  const text = `MQTT网关：${address || "--"}
MQTT账号：${username || "--"}
MQTT密码：${password || "--"}
组织ID：${organizationCode || "--"}
设备绑定码：${deviceBindingCode || "--"}`;

  // ✅ 兼容性处理：检查是否支持 navigator.clipboard
  if (navigator.clipboard && window.isSecureContext) {
    navigator.clipboard
      .writeText(text)
      .then(() => {
        ElMessage.success("已复制到剪贴板");
      })
      .catch(() => {
        ElMessage.error("复制失败，请手动复制");
      });
  } else {
    // Fallback: 使用传统方式
    const textarea = document.createElement("textarea");
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    try {
      const successful = document.execCommand("copy");
      if (successful) {
        ElMessage.success("已复制到剪贴板");
      } else {
        ElMessage.error("复制失败，请手动复制");
      }
    } catch (err) {
      ElMessage.error("复制失败，请手动复制");
    } finally {
      document.body.removeChild(textarea);
    }
  }
};

defineExpose({
  openDialog,
});
</script>

<template>
  <div class="page">
    <ElDialog
      v-model="dialogVisible"
      title="配置机场"
      width="580px"
      align-center
      :show-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="true"
    >
      <div class="airport-info">
        <ElRow class="info-row">
          <ElCol :span="8" class="info-label">MQTT网关：</ElCol>
          <ElCol :span="16" class="info-value">{{
            airportInfo.address === "--" ? "--" : airportInfo.address
          }}</ElCol>
        </ElRow>

        <ElRow class="info-row">
          <ElCol :span="8" class="info-label">MQTT账号：</ElCol>
          <ElCol :span="16" class="info-value">{{
            airportInfo.username === "--" ? "--" : airportInfo.username
          }}</ElCol>
        </ElRow>

        <ElRow class="info-row">
          <ElCol :span="8" class="info-label">MQTT密码：</ElCol>
          <ElCol :span="16" class="info-value">{{
            airportInfo.password === "--" ? "--" : airportInfo.password
          }}</ElCol>
        </ElRow>

        <ElRow class="info-row">
          <ElCol :span="8" class="info-label">组织ID：</ElCol>
          <ElCol :span="16" class="info-value">{{
            airportInfo.organizationCode === "--"
              ? "--"
              : airportInfo.organizationCode
          }}</ElCol>
        </ElRow>

        <ElRow class="info-row">
          <ElCol :span="8" class="info-label">设备绑定码：</ElCol>
          <ElCol :span="16" class="info-value">{{
            airportInfo.deviceBindingCode === "--"
              ? "--"
              : airportInfo.deviceBindingCode
          }}</ElCol>
        </ElRow>

        <div class="info-tips">
          请通过APP或遥控器的机场部署流程-云服务配置，将上述信息输入至机场完成注册，注册后刷新列表即可显示。
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <ElButton @click="closeDialog">返回</ElButton>
          <ElButton type="primary" @click="copyInfo">复制信息</ElButton>
        </div>
      </template>
    </ElDialog>
  </div>
</template>

<style scoped lang="scss">
.airport-info {
  .info-row {
    margin-bottom: 24px;
    align-items: center;
  }

  .info-label {
    text-align: left;
    font-size: 16px;
    color: #333;
    font-weight: 500;
  }

  .info-value {
    text-align: right;
    font-size: 16px;
    color: #333;
  }

  .info-tips {
    margin-top: 30px;
    margin-bottom: 20px;
    text-align: center;
    color: #666;
    font-size: 14px;
    line-height: 1.5;
    padding: 0 20px;
  }
}

.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 15px;

  .el-button {
    min-width: 100px;
  }
}
</style>